<template>
	<coreshop-page title="我的账户" mode="left">
		<view class="layout-balance-box">
			<view class="balance-box">
				<view class="price">
					<text class="symbol">￥</text>{{ state.userInfo.balance }}
				</view>
				<view class="tit">账户余额</view>
			</view>

			<view class="service-box">
				<template v-for="(item, index) in state.serviceList" :key="index">
					<view class="item-box" v-if="item.show" @click="handleRouteNavigateTo(item.url)">
						<view class="title">
							<image class="img" :src="handleStaticResources(item.img)"></image>
							<view class="tit">{{ item.title }}</view>
						</view>
						<view class="icon">
							<uv-icon name="arrow-right" color="#292B2E" size="15"></uv-icon>
						</view>
					</view>
				</template>

			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, onMounted, watch } from 'vue';
	import { queryUserInfo } from '@/core/api';
	import type { Response, UserInfoType, ShopConfigType } from '@/core/models';
	import { handleStaticResources, handleRouteNavigateTo } from '@/core/utils';
	import { useShopConfigStore } from '@/core/store';
	import { ShowMenuEnum } from '@/core/enum';

	/** 获取项目配置 */
	const shopConfigStore = useShopConfigStore();
	const state = reactive<{
		userInfo : UserInfoType;
		serviceList : Array<{
			title : string;
			img : string;
			url : string;
			show : boolean;
			key ?: string;
		}>
	}>({
		userInfo: {},
		serviceList: [
			{
				title: "账户充值",
				img: "/static/images/balance/balance-recharge.png",
				url: "/pages/subpackage/member/balance/recharge/index",
				show: false,
				key: 'showStoreBalanceRechargeSwitch'
			}, {
				title: "余额提现",
				img: "/static/images/balance/balance-cash.png",
				url: "/pages/subpackage/member/balance/withdraw/index",
				show: false,
				key: 'isAllowWithdrawCash'
			}, {
				title: "余额明细",
				img: "/static/images/balance/balance-detail.png",
				url: "/pages/subpackage/member/balance/balance-detail/index",
				show: true,
			}, {
				title: "提现记录",
				img: "/static/images/balance/balance-record.png",
				url: "/pages/subpackage/member/balance/withdraw-detail/index",
				show: true,
			}, {
				title: "我的银行卡",
				img: "/static/images/balance/balance-card.png",
				url: "/pages/subpackage/member/balance/bank-card/index",
				show: true,
			},
		]
	})

	watch(() => shopConfigStore.config, (newVal : ShopConfigType) => {
		if (newVal) {
			state.serviceList = state.serviceList.map(item => {
				if (item.key) {
					item.show = shopConfigStore.config?.[item.key] === ShowMenuEnum.show;
				}
				return item;
			});
		}
	}, { immediate: true })

	onMounted(() => {
		getUserInfo();
	});

	const getUserInfo = async () => {
		const userInfo : Response<UserInfoType> = await queryUserInfo();
		state.userInfo = userInfo?.data;
	}
</script>
<style lang="scss" scoped>
	@import './index.scss';
</style>